@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            商业伙伴管理
            <small>供应商/客户列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#">基础数据</a></li>
            <li class="active">商业伙伴</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">商业伙伴列表</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-primary" onclick="AddPartner()">
                                <i class="fa fa-plus"></i> 新增伙伴
                            </button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="partner-table" class="avue-crud" ref="crud">
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<script>
    var vm = new Vue({
        el: '#partner-table',
        data: function () {
            return {
                options: {
                    url: '/JxPartner/GetPages',
                    deleteBtn: true,
                    editBtn: true,
                    addBtn: false,
                    viewBtn: true,
                    searchShow: true,
                    columnBtn: true,
                    excelBtn: true,
                    printBtn: true,
                    searchMenuSpan: 6,
                    menuPosition: 'right',
                    align: 'center',
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    searchLabelWidth: 100,
                    labelWidth: 120,
                    searchList: [
                        {
                            label: '伙伴名称',
                            prop: 'PartnerName',
                            type: 'input',
                            width: 200
                        },
                        {
                            label: '伙伴类型',
                            prop: 'PartnerType',
                            type: 'select',
                            dicData: [
                                { label: '供应商', value: '供应商' },
                                { label: '客户', value: '客户' }
                            ],
                            width: 150
                        },
                        {
                            label: '联系人',
                            prop: 'ContactPerson',
                            type: 'input',
                            width: 150
                        }
                    ],
                    column: [
                        {
                            label: '伙伴编码',
                            prop: 'PartnerCode',
                            search: true,
                            rules: [
                                { required: true, message: '请输入伙伴编码', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '伙伴名称',
                            prop: 'PartnerName',
                            search: true,
                            rules: [
                                { required: true, message: '请输入伙伴名称', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '伙伴类型',
                            prop: 'PartnerType',
                            type: 'select',
                            dicData: [
                                { label: '供应商', value: '供应商' },
                                { label: '客户', value: '客户' }
                            ],
                            rules: [
                                { required: true, message: '请选择伙伴类型', trigger: 'change' }
                            ]
                        },
                        {
                            label: '联系人',
                            prop: 'ContactPerson',
                            type: 'input'
                        },
                        {
                            label: '联系电话',
                            prop: 'ContactPhone',
                            type: 'input'
                        },
                        {
                            label: '电子邮箱',
                            prop: 'Email',
                            type: 'input',
                            rules: [
                                { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                            ]
                        },
                        {
                            label: '地址',
                            prop: 'Address',
                            type: 'input'
                        },
                        {
                            label: '备注',
                            prop: 'Remark',
                            type: 'textarea'
                        },
                        {
                            label: '创建时间',
                            prop: 'CreateTime',
                            type: 'datetime',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            editDisplay: false,
                            addDisplay: false,
                            viewDisplay: true
                        }
                    ],
                    beforeOpen: function (done, type) {
                        // 清空表单验证状态
                        this.$refs.crud.resetForm();
                        done();
                    },
                    success: function (res, type) {
                        if (type === 'add' || type === 'edit' || type === 'del') {
                            this.$message.success(res.Message);
                            this.$refs.crud.refresh();
                        }
                    },
                    updateBtn: {
                        url: '/JxPartner/Update',
                        method: 'post'
                    },
                    delBtn: {
                        url: '/JxPartner/Delete',
                        method: 'delete'
                    }
                }
            }
        },
        methods: {
            AddPartner: function () {
                this.$refs.crud.handleAdd();
            }
        },
        mounted: function () {
            // 组件挂载后执行
        }
    });
</script>